<script lang="ts" setup>
import { useActivityWelcomeBonus } from '~/components-business/global-popups/newWallet/ts/depositBonusInfoHook';
import CloseBtn from '~/components/card/CloseBtn.vue';
import Countdown from './Countdown.vue';

const { userInfo } = storeToRefs(useUserStore());

const { getBoostItemRef, refetchActivity } = useActivityWelcomeBonus();

const openRef = ref(false);

watch(getBoostItemRef, (v) => {
  if (v && !openRef.value) {
    openRef.value = true;
  }
}, { immediate: true });

const isCountDownFinish = ref(false);

function onCountDownFinish() {
  refetchActivity();
  isCountDownFinish.value = true;
  closeFn();
}

const getStorageRef = computed(() => {
  const uid = userInfo.value?.uid;
  if (!uid) {
    return;
  }
  const key = `OPEN_SUSPENSION_U_${uid}_COUNT_${getBoostItemRef.value?.depositCount ?? 0}`;
  const da = localStorage.getItem(key);
  const data = da ? bignumber(da).toNumber() : 0;
  const set = () => localStorage.setItem(key, Date.now().toString());
  return { key, data, set };
});

function closeFn() {
  getStorageRef.value?.set();
  openRef.value = false;
  isCountDownFinish.value = false;
}

const getIcCanShowRef = computed(() => {
  const data = getBoostItemRef.value;
  const storageTime = getStorageRef.value?.data ?? 0;
  if (storageTime > 0 && bignumber(Date.now() - storageTime).dividedBy(1000 * 60 * 60 * 24).lte(1)) {
    return false;
  }
  return openRef.value && data?.available && data?.timeInfo.isInBoostExpireSecond && !isCountDownFinish.value;
});
</script>

<template>
  <div v-if="getIcCanShowRef" class="suspension-box">
    <CloseBtn class="right-3 top-3 z-2 bg-sys-layer-c/30 backdrop-blur !absolute" @click="closeFn" />
    <div class="text-3.5">
      {{ getBoostItemRef?.depositCount }}-st <span class="font-900">{{ $t('qHItEuwpUGhRGy49WzDt') }}</span>
    </div>
    <div class="flex items-center gap-1.5 text-4 font-900">
      <i class="i-local:bonus__card-icon h-4 w-4" />
      <span>{{ getBoostItemRef?.maxInfo.boostRateText }}</span> <span>{{ $t('efoNcLqwIEylHaLUt3yxs') }}</span>
    </div>
    <div class="grid grid-cols-[auto_1fr] mt-3 w-full items-center gap-1.5">
      <Countdown :value="getBoostItemRef?.timeInfo?.boostExpireDate" @finish="onCountDownFinish" />
      <AButton
        class="ant-cover__Button-3d-primary w-full !h-8.5 !flex-center"
        type="primary" block
        @click="getBoostItemRef?.toDeposit?.()"
      >
        {{ $t('p9zKloGqNTkIgC4asiQrx') }}
      </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.suspension-box {
  --uno: 'fixed bottom-6 right-3 z-999 w-80 flex flex-col items-start gap-3 rounded-4 p-4 !lt-mobile:hidden';
  background: linear-gradient(90deg, #3b82f6 0%, #1e3a8a 100%);
}
</style>
